<template>
	<el-drawer v-model="visible" :with-header="false" :size="600" destroy-on-close @closed="$emit('closed')">
		<el-container v-loading="loading">
			<el-main style="padding:20px 20px 20px 20px">
                <sc-title :title="titleMap[mode]"></sc-title>
                <el-form ref="form" label-width="80px" label-position="right" class="formshows">
					<div class="info">
						<el-form-item label="头像">
							<el-avatar :size="60" v-if="form.portrait && form.portrait.url" :src="form.portrait && form.portrait.url"></el-avatar>
							<el-avatar :size="60" v-else src="img/avatar.png"></el-avatar>
						</el-form-item>
						<el-row>
							<el-col :span="12"><el-form-item label="姓名">{{form.name}}</el-form-item></el-col>
							<el-col :span="12"><el-form-item label="身份">{{form.identity && form.identity.name || '暂无'}}</el-form-item></el-col>
						</el-row>
						<el-row>
							<el-col :span="12"><el-form-item label="账号">{{form.account || '暂无'}}</el-form-item></el-col>
							<el-col :span="12"><el-form-item label="手机号">{{form.mobile || '暂无'}}</el-form-item></el-col>
						</el-row>
						<el-form-item label="角色" v-if="form.identity.val == 1">
							<el-space wrap v-if="form.roles.length">
								<el-tag v-for="(item,index) in form.roles" :key="index">{{item.name}}</el-tag>
							</el-space>
							<template v-else>暂无</template>
						</el-form-item>
						<el-form-item label="状态">
							<el-tag size="mini" :type="form.status.val == 1 && 'success'">{{form.status.name}}</el-tag>
						</el-form-item>
					</div>
                </el-form>
			</el-main>
			<el-footer>
				<el-button @click="visible=false">关闭</el-button>
			</el-footer>
		</el-container>
	</el-drawer>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				loading: false,
				mode: "add",
				titleMap: {
                    show: '查看管理员'
				},
                form: {},
				visible: false
			}
		},
		mounted() {

		},
		methods: {
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this;
			},
			//表单注入数据
			setData(data){
                this.form = data
			}
		}
	}
</script>

<style scoped>
.info{padding-bottom: 10px;margin-bottom: 10px;}
.info:last-child{border: none;padding-bottom: 0;margin-bottom: 0;}
[data-theme='dark'] .info{border-color: #434343;}
</style>